<template>
  <div class="app-container">
    <search-box :isMulti="false">
      <template slot="content">
        <div class="left-box">
          <el-form-item label="用户名称：">
            <el-input v-model="listQuery.userName"
                      placeholder="请输入"
                      clearable />
          </el-form-item>

          <el-form-item label="单位名称：">
            <el-input v-model="listQuery.compName"
                      placeholder="请输入"
                      clearable />
          </el-form-item>
          <el-form-item label="所属区域：">
            <el-select v-model="listQuery.areaId"
                       placeholder="请选择">
              <el-option v-for="item in areaList"
                         :key="item.id"
                         :label="item.areaName"
                         :value="item.areaCode">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="right-box">
          <el-button size="mini"
                     @click="handleFilter">查询</el-button>
          <el-button size="mini"  type="info"
                     @click="reset">重置</el-button>
          <el-button size="mini"  type="success"
                     @click="handleCreate">新增</el-button>
        </div>
      </template>
    </search-box>
    <div class="table-wrap">
      <el-table :data="list"
                style="width:100%"
                element-loading-text="Loading"
                height="600">
        <el-table-column
          type="index"
          width="50"
          label="序号"
        ></el-table-column>
        <el-table-column prop="userName"
                         label="用户名称">
        </el-table-column>

        <el-table-column prop="areaName"
                         label="所属区县">
        </el-table-column>

        <el-table-column prop="compName"
                         label="单位名称">
        </el-table-column>

        <el-table-column prop="chargeMan"
                         label="负责人">
        </el-table-column>
        <el-table-column label="操作"
                         width="200">
          <template slot-scope="scope">
            <div class="scope-operate">
<!--              <el-button type="success" size="mini" >编辑-->
<!--              </el-button>-->

              <el-button type="info" size="mini" @click="resetPwd(scope.row)">重置密码
              </el-button>
              <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除
              </el-button>

            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0"
                  :total="total"
                  :page.sync="listQuery.pageNumber"
                  :limit.sync="listQuery.pageSize"
                  @pagination="getList" />
    </div>


  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import * as apiUser from '@/api/user'
  import * as userInfo from '@/api/userInfo/userInfo'
  import waves from '@/directive/waves' // waves directive
  import Pagination from '@/components/Pagination' // secondary package based on el-pagination
  // 当然你也可以为了方便使用，将它注册到全局
  import { MessageBox } from 'element-ui'
  import bus from '@/utils/eventBus'
  import searchBox from '@/components/searchBox.vue'
  import * as area from '@/api/area'

  export default {
    name: 'AdminUser',
    components: { Pagination, searchBox },
    directives: { waves },
    filters: {

    },
    data () {
      return {
        list: null,
        total: 0,
        listQuery: { // 查询列表时的参数对象
          pageNumber: 1,
          pageSize: 50,
          userType: 1,
          name: undefined,
          userName: undefined,
          compName: undefined,
          appName: process.env.VUE_APP_APP_NAME,
          tenantIdList: []
        },
        dialogFormVisible: false,
      }
    },
    computed: {
      ...mapGetters([
        'selectedTenantId',
        'tenantList'
      ])
    },
    created () {
      this.getList()
      this.getArea()
      // 监听 租户改变的事件,选择不同租户后,立马刷新数据
      bus.$on('selectedTenantIdChanged', () => {
        console.log("selectedTenantIdChanged事件触发...")
        this.getList()
      })
    },
    mounted () {
      // 测试用
      // var that = this
      // setTimeout(function() {
      //   that.dialogFormVisible = true
      // }, 5000)
    },
    beforeDestroy () { // 当路由切换到其他页面时触发
      bus.$off('selectedTenantIdChanged')
    },
    methods: {
      async getList () { // 获取列表数据
        this.listQuery.tenantIdList = []
        this.listQuery.userType = 3;
        if (this.selectedTenantId == undefined) {//当前选中所有的租户
          this.tenantList.forEach((tenant, index) => {
            this.listQuery.tenantIdList.push(tenant.id)
          })
        } else {
          this.listQuery.tenantIdList.push(this.selectedTenantId)
        }
        const { content } = await userInfo.getUserInfoList(this.listQuery)
        this.list = content.list
        this.total = content.totalCounts
      },
      handleFilter () {
        this.listQuery.pageNumber = 1
        this.getList()
      } ,

      handleCreate () {
        if (this.listQuery.tenantId == undefined) {
          MessageBox('必须先选择一个特定的租户,才能继续操作')
          return
        }
        this.$refs['createPersonForm'].clearFormData() // 直接调用子组件的method, 很方便
        this.$refs['createPersonForm'].setTenantId(this.listQuery.tenantId)
        this.dialogStatus = 'create'
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs['createPersonForm'].$refs['dataForm'].clearValidate()
        })
      },
      handleUpdate (row) {
        console.log('row--->', row)
        const currentRow = Object.assign({}, row)
        this.$refs['createPersonForm'].setCurrentRow(currentRow)
        this.dialogStatus = 'update'
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs['createPersonForm'].$refs['dataForm'].clearValidate()
        })
      },

      resetPwd(row){
        this.$confirm('是否确认重置密码?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          row.password = row.userName+'123';
          userInfo.resetPwd(row).then(() => {
            this.$notify({
              title: '成功',
              message: '密码重置成功',
              type: 'success',
              duration: 2000
            })
            this.getList()
          })


        }).catch(() => {
        })
      },


      handleDelete(row){
        this.$confirm('是否确认删除该用户,一旦删除不可恢复?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          userInfo.handleDelete(row).then(() => {
            this.$notify({
              title: '成功',
              message: '用户删除成功',
              type: 'success',
              duration: 2000
            })
            this.getList()
          })


        }).catch(() => {
        })
      },
      reset () {
        this.listQuery = {}
        this.getList()
      },
      async getArea () { // 获取列表数据

        const { content } = await area.getAreaList()
        this.areaList = content
      },
    }
  }
</script>

<style scoped>
  .app-select {
    margin-bottom: 20px;
  }
</style>
